<template>
  <q-list>

    <q-item >
      <q-item-section avatar>
        <q-icon name="ion-logo-slack" color="primary"/>
      </q-item-section>
      <q-item-section class="text-primary">XD Security</q-item-section>
    </q-item>

    <q-item clickable v-ripple to="/home" active-class="text-white bg-primary">
      <q-item-section avatar>
        <q-icon name="home"/>
      </q-item-section>
      <q-item-section>首页</q-item-section>
    </q-item>

    <q-expansion-item icon="settings" label="系统管理" :content-inset-level="0.5"
                      group="menuGroup" v-model="systemExpanded">
      <q-item clickable v-ripple to="/system/user" active-class="text-white bg-primary">
        <q-item-section avatar>
          <q-icon name="person"/>
        </q-item-section>
        <q-item-section>用户管理</q-item-section>
      </q-item>
      <q-item clickable v-ripple to="/system/role" active-class="text-white bg-primary">
        <q-item-section avatar>
          <q-icon name="person"/>
        </q-item-section>
        <q-item-section>角色管理</q-item-section>
      </q-item>
      <q-item clickable v-ripple to="/system/permission" active-class="text-white bg-primary">
        <q-item-section avatar>
          <q-icon name="person"/>
        </q-item-section>
        <q-item-section>权限管理</q-item-section>
      </q-item>
    </q-expansion-item>

    <q-expansion-item icon="laptop_windows" label="系统监控" :content-inset-level="0.5"
                      group="menuGroup" v-model="monitorExpanded">
      <q-item clickable v-ripple to="/monitor/online" active-class="text-white bg-primary">
        <q-item-section avatar>
          <q-icon name="person"/>
        </q-item-section>
        <q-item-section>在线用户</q-item-section>
      </q-item>
    </q-expansion-item>
  </q-list>
</template>

<script>
  export default {
    name: 'MenuList',
    props: {
      miniState: Boolean
    },
    data() {
      return {
        systemExpanded: false,
        systemMenu: false,
        monitorExpanded: false,
      }
    },
    methods: {
      defaultOpened(itemName) {
        return false
      },
      switchGroup(group) {
        switch (group) {
          case '系统管理':
            this.systemExpanded = true
            this.monitorExpanded = false
            break;
          case "系统监控":
            this.systemExpanded = false
            this.monitorExpanded = true
            break;
        }
      }
    },
    mounted() {
      this.switchGroup(this.$route.meta.group)
    },
    watch: {
      '$route.path'() {
        this.switchGroup(this.$route.meta.group)
      }
    }
  }
</script>

<style scoped>

</style>
